<template>
	<view class="app app-bg">
		<view class="money">需付金额: ￥{{ vk.pubfn.priceFilter(money) }}</view>
		<view class="type">
			<text class="logo">选择支付方式</text>
			<view class="item" @tap="select('wxpay')">
				<image class="icon" src="@/static/mine/pay_weixin.png"></image>
				<text>微信支付</text>
				<image src="@/static/home/choose.png" v-if="type === 'wxpay'" class="selt"></image>
				<image src="@/static/home/choose_no.png" class="selt" v-else></image>
			</view>
			<!-- 	<view class="item" @tap="select('alipay')">
				<image class="icon" src="@/static/mine/pay_ali.png"></image>
				<text>支付宝支付</text>
				<image
					src="@/static/home/choose.png"
					v-if="type === 'alipay'"
					class="selt"
				></image>
				<image src="@/static/home/choose_no.png" class="selt" v-else></image>
			</view> -->
			<view class="item" @tap="select('balance')">
				<image class="icon" src="@/static/home/bal_pay.png"></image>
				<text>钱包支付</text>
				<text class="bal">余额: ￥{{ vk.pubfn.priceFilter(balance) }}</text>
				<image src="@/static/home/choose.png" v-if="type === 'balance'" class="selt"></image>
				<image src="@/static/home/choose_no.png" class="selt" v-else></image>
			</view>
		</view>
		<view class="btn" @tap="pay">立即支付</view>
		<u-modal content="还没有支付密码，请先前往设置" v-model="show"
			@confirm="vk.navigateTo('/pages/user/setting/update-payword')"></u-modal>
		<keyboard-pay ref="keyboard" :money="money" @finish="finish"></keyboard-pay>
		<vk-uni-pay ref="vkPay"></vk-uni-pay>
	</view>
</template>

<script>
	var vk = uni.vk // vk依赖
	import keyboardPay from "@/pages/project/components/keyboard-pay"

	export default {
		components: {
			keyboardPay
		},
		data() {
			return {
				// 订单id，加钟项目id
				oid: "",
				pid: "",
				// 其他支付信息
				money: 0,
				balance: 0,
				type: "wxpay",
				order_number: "",
				order_number_bells: "",

				flag: false,
				show: false
			}
		},
		onLoad(opt) {
			if (opt.oid && opt.pid) {
				this.oid = opt.oid
				this.pid = opt.pid
			} else {
				vk.toast("参数不足")
				return uni.navigateBack()
			}
			vk.showLoading("获取中...")
			this.options = opt;
		},
		onShow() {
			this.init()
		},
		onReady() {
			let {
				options = {}
			} = this;
			// 在onReady内执行是为了先让组件加载完成
			// 如果是同步回调过来的，执行下查询
			if (options.out_trade_no) {
				this.vkPay.status = 1;
				this.$refs.vkPay._checkPay(options.out_trade_no, () => {
					this.paySuccess();
				});
			}
		},
		methods: {
			// 初始化
			init() {
				vk.callFunction({
					url: "client/order.queryOrderBellsPay",
					data: {
						oid: this.oid,
						pid: this.pid
					}
				}).then(res => {
					this.flag = res.flag
					this.money = res.money
					this.balance = res.balance
					this.order_number = res.order_number
					this.order_number_bells = res.order_number_bells
					vk.hideLoading()
				})
			},
			// 选择支付方式
			select(type) {
				this.type = type
			},
			// 立即支付
			pay() {
				if (!this.type) {
					return vk.toast("请选择支付方式")
				}
				if (this.type === "balance") {
					this.payForBalance()
				} else {
					this.payReal(this.type)
				}
			},
			// 余额支付
			payForBalance() {
				if (this.balance < this.money) {
					return vk.toast("余额不足")
				}
				if (!this.flag) {
					this.show = true
					return
				}
				this.$refs.keyboard.showPop(true)
			},
			finish(payword) {
				vk.callFunction({
					url: "client/order.payBellsForBalance",
					title: "支付中...",
					data: {
						payword,
						oid: this.oid,
						pid: this.pid,
						order_number_bells: this.order_number_bells
					}
				}).then(() => {
					this.paySuccess()
				})
			},
			// 微信或支付宝支付
			payReal(type) {
				let data = {
					provider: type,
					total_fee: this.money,
					out_trade_no: this.order_number_bells,
					onb: this.order_number,
					pid: this.pid
				}
				// #ifdef H5
				let aaa = vk.h5.getEnv()
				let bbb = vk.getStorageSync("openid")
				if (aaa === "h5-weixin" && bbb) data.openid = bbb
				data.return_url = 'https://app.nw51.net/pages/order/detail?_id=' + this.oid
				// #endif

				this.$refs.vkPay.createPayment({
					action: {
						name: "router",
						dataKey: "data",
						actionKey: "$url",
						action: "client/order.createPaymentForServiceBells"
					},
					data,
					success: () => {
						this.paySuccess()
					},
					fail: res => {
						if (res.failType === "create") {
							vk.alert(res.msg)
						} else if (res.failType === "request") {
							vk.toast("请求支付失败")
						} else if (res.failType === "result") {
							vk.toast("支付失败")
						}
					},
					cancel: () => {
						vk.toast("用户取消支付")
					}
				})
			},
			// 支付成功
			paySuccess() {
				let pages = getCurrentPages()
				vk.toast("支付成功", "none", 800, () => {
					if (pages[pages.length - 2] && pages[pages.length - 2].route == "pages/order/detail") {
						// 订单详情支付返回原页面
						vk.navigateBack()
					} else {
						// 重定向至订单详情
						vk.redirectTo(`/pages/order/detail?_id=${this.oid}`)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app {
		padding: 20rpx;
	}

	.money {
		font-size: 30rpx;
		font-weight: bold;
		padding: 26rpx 20rpx;
		border-radius: 12rpx;
		background-color: #ffffff;
	}

	.type {
		margin: 20rpx 0;
		padding: 26rpx 20rpx 24rpx;
		border-radius: 12rpx;
		background-color: #ffffff;

		.logo {
			display: block;
			font-weight: bold;
			padding-bottom: 10rpx;
		}

		.item {
			display: flex;
			align-items: center;
			padding: 30rpx 0 10rpx 20rpx;

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 18rpx;
			}

			.bal {
				color: #ff8f1e;
				font-size: 24rpx;
				margin-left: 6rpx;
			}

			.selt {
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
		}
	}

	.btn {
		background-color: #24C388;
		border-radius: 44rpx;
		color: #ffffff;
		padding: 18rpx;
		text-align: center;
		margin-top: 240rpx;
	}
</style>